.slds-text-title_caps.slds-m-bottom_small Variations
each val in ['base', 'neutral', 'brand', 'outline-brand', 'destructive', 'text-destructive', 'success']
  button(type="button", nglButton, variant=val) #{val}

.slds-text-title_caps.slds-m-top_x-large.slds-m-bottom_small With icon
button(type="button", nglButton, iconName="utility:download") Download
button(type="button", nglButton, variant="brand", iconName="utility:edit", iconPosition="left") Edit
button(type="button", nglButton, variant="destructive", iconName="utility:delete", iconPosition="right") Delete

.slds-text-title_caps.slds-m-top_x-large.slds-m-bottom_small Inverse
div(style="background-color: #16325c; padding: 12px;")
  button(type="button", nglButton, variant="inverse") Download
  button(type="button", nglButton, variant="inverse", iconName="utility:edit") Edit
  button(type="button", nglButton, variant="inverse" iconName="utility:delete", iconPosition="right") Delete


div.slds-text-title_caps.slds-m-top_x-large.slds-m-bottom_small Stateful

button(type="button", nglButtonStateful, [(state)]="selected")
  ngl-state-on(iconName="check") Following
  ngl-state-off(iconName="add") Follow
  ngl-state-hover(iconName="close") Unfollow

button(type="button", nglButtonStateful, variant="brand", [(state)]="selected")
  ngl-state-on Following
  ngl-state-off Follow
  ngl-state-hover Unfollow
